{% extends 'base.html' %}
{% block title %}
    <title>cmdb管理平台——主机管理</title>
{% endblock %}
{% block body %}
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h1 class="page-header">控制台</h1>
        <h2 class="sub-header">主机管理</h2>
        <button class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">添加主机</button>
        <div class="table-responsive">
            <!-- 模态框结构 -->
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
                  
                <div class="modal-dialog" role="document">
                        
                    <div class="modal-content">
                              
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">×</span></button>
                            <h4 class="modal-title">添加主机</h4>
                        </div>
                             
                        <div class="modal-body">
                            <!-- 此处是在模态框中显示的内容 -->
                            <form action="./1.py" method="GET">
                                  
                                <div class="form-group">
                                    <label for="hostname">主机名称</label>
                                    <input type="text" class="form-control" id="hostname" placeholder="主机名称">
                                </div>
                                <div class="form-group">
                                    <label for="ip">ip地址</label>
                                    <input type="text" class="form-control" id="ip" placeholder="ip地址">
                                </div>
                                <div class="form-group">
                                    <label for="server_type">主机类型</label>
                                    <select class="form-control" id="server_type">
                                        <option>web</option>
                                        <option>mysql</option>
                                        <option>lb</option>
                                        <option>proxy</option>
                                        <option>cache</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <h5>主机状态</h5>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" value="yes">在线
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="status" value="no">不在线
                                    </label>
                                </div>
                            </form>
                        </div>
                            
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <!-- <button type="button" class="btn btn-primary" id="save">添加</button> -->
                            <input type="submit" class="btn btn-primary" value="添加">
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div><!-- /.modal -->
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>主机名称</th>
                    <th>ip地址</th>
                    <th>服务器类型</th>
                    <th>服务器状态</th>
                    <th>管理操作</th>
                </tr>
                </thead>
                <tbody>
                {% for one in hostlist %}
                    <tr>
                        <td>{{ one.id }}</td>
                        <td>{{ one.hostname }}</td>
                        <td>{{ one.ip }}</td>
                        <td>{{ one.type }}</td>
                        {% if one.status == 'up' %}
                            <td style="color: green">√</td>
                            {% else %}
                            <td style="color: red">X</td>
                        {% endif %}
                        <td>
                            <button class="btn btn-info btn-sm">更新</button>
                            <button class="btn btn-danger btn-sm">删除</button>
                        </td>
                    </tr>
                {% endfor %}
                {#              <tr>#}
                {#                <td>2</td>#}
                {#                <td>server02</td>#}
                {#                <td>192.168.19.101</td>#}
                {#                <td>mysql</td>#}
                {#                <td>online</td>#}
                {#                <td>#}
                {#                  <button class="btn btn-info btn-sm">更新</button>#}
                {#                  <button class="btn btn-danger btn-sm">删除</button>#}
                {#                </td>#}
                {#              </tr>#}
                {#              <tr>#}
                {#                <td>3</td>#}
                {#                <td>server03</td>#}
                {#                <td>192.168.19.102</td>#}
                {#                <td>web</td>#}
                {#                <td>down</td>#}
                {#                <td>#}
                {#                  <button class="btn btn-info btn-sm">更新</button>#}
                {#                  <button class="btn btn-danger btn-sm">删除</button>#}
                {#                </td>#}
                {#              </tr>#}
                {#              <tr>#}
                {#                <td>4</td>#}
                {#                <td>server04</td>#}
                {#                <td>192.168.19.103</td>#}
                {#                <td>lb</td>#}
                {#                <td>online</td>#}
                {#                <td>#}
                {#                  <button class="btn btn-info btn-sm">更新</button>#}
                {#                  <button class="btn btn-danger btn-sm">删除</button>#}
                {#                </td>#}
                {#              </tr>#}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}